<template>
  <div class="controlsContainer">
    <div class="controlsBtn">
      <div class="mode">
        <div class="btnContainer" @click="modeChange">
          <img :src="defaultMode" :title="defaultModeTitle" width="15" height="15">
        </div>
      </div>
      <div class="previous">
        <div class="btnContainer" @click="musicSwitch('previous')">
          <img src="@/assets/previous-grey.svg" width="15" height="15">
        </div>
      </div>
      <div class="current">
        <div class="playBtn" @click="play">
          <img :src="playIcon" width="15" height="15">
        </div>
      </div>
      <div class="next">
        <div class="btnContainer" @click="musicSwitch('next')">
          <img src="@/assets/next-grey.svg" width="15" height="15">
        </div>
      </div>
    </div>
    <div class="progressBar">
      <div class="progressPlayingTime">{{ currentPlayingLength }}</div>
      <div class="progressBox" style="display: inline-block;">
        <span class="progressbg" @click="progressClick" ref="progressbg"></span>
        <div class="progress" :style="{width:progressWidth }" @click="progressClick">
          <span></span>
        </div>
      </div>
      <div class="progressTotal">{{ currentPlayingTotalLength }}</div>
    </div>
  </div>
</template>

<script>
import playSvg from '../../../assets/play.svg'
import pauseSvg from '../../../assets/pause.svg'
import listSvg from '../../../assets/list.svg'
import orderSvg from '../../../assets/order.svg'
import simple from '../../../assets/simple.svg'
import {getMusicTime} from "@/utils/util";
import {modePlay, previousMusic, nextMusic, toggle, play} from "@/components/web/util/music";
import Vue from "vue";
import {CURRENT_PLAYING_MUSIC, MUSIC_PLAY_LIST} from "@/store/mutation-types";

export default {
  name: "Controls",
  data() {
    return {
      progressWidth: '0%', /// 播放进度
      playIcon: playSvg, // 默认是暂停图标
      currentPlayingLength: '00:00', // 当前播放时长
      currentPlayingTotalLength: '00:00',// 当前播放总时长
      modeList: [listSvg, orderSvg, simple], // 模式列表
      modeListTitle: ['列表循环', '顺序播放', '单曲循环'], // 模式列表标题
      modeListFlag: ['listLoop', 'order', 'simple'], // 模式标识列表
      defaultMode: listSvg, // 默认模式
      defaultModeTitle: '列表循环',// 默认模式标题
    }
  },
  beforeMount() {
    this.$eventBus.$on('updateControl', (musicInfo) => {
      this.updateControls(musicInfo)
    });
  },
  mounted() {
    this.updateControls()
  },
  methods: {
    modeChange() {// 更改模式
      let bg = this.$bg;
      let index = this.modeList.indexOf(this.defaultMode);
      if (index < this.modeList.length - 1) {
        index += 1
      } else {
        index = 0
      }
      this.defaultMode = this.modeList[index]
      this.defaultModeTitle = this.modeListTitle[index]
      bg.musicPlayer.playMode = this.modeListFlag[index];

    },
    // 上一首或下一首
    musicSwitch(flag) {
      if (flag === 'previous') {
        previousMusic()
      } else if (flag === 'next') {
        nextMusic()
      }
    },
    play() {
      let bg = this.$bg;
      if (bg.musicPlayer.context.readyState === 0) { // 没有关于音频是否就绪的信息,说明是刚打开界面
        if (this.$store.getters.playList != null && this.$store.getters.playList && this.$store.getters.playList.length > 0) {
          bg.musicPlayer.musicList = this.$store.getters.playList;
          bg.musicPlayer.currentMusic = this.$store.getters.currentPlayingMusic;
          bg.musicPlayer.playState = false;
          bg.musicPlayer.context.src = bg.musicPlayer.currentMusic.url;
          toggle(bg.musicPlayer);
          this.changePlayIcon(bg);
          // bg.musicPlayer.playState = true;
          return;
        } else {
          let currentMusic = Vue.ls.get(CURRENT_PLAYING_MUSIC);
          let musicList = Vue.ls.get(MUSIC_PLAY_LIST);
          if (currentMusic != null) {
            bg.musicPlayer.currentMusic = currentMusic;
            bg.musicPlayer.musicList = musicList;
            this.$store.commit('SET_CURRENTMUSIC', currentMusic);
            this.$store.commit('SET_PLAYLIST', musicList);
            play(bg.musicPlayer)
            this.changePlayIcon(bg);
            return;
          }else {
            this.$store.commit('SET_MUSIC_CLEAR',[]);
          }
        }
      }

      bg.musicPlayer.context.ontimeupdate = this.ontimeupdate
      toggle(bg.musicPlayer);
      this.changePlayIcon(bg);
    },
    changePlayIcon(bg) {
      if (bg.musicPlayer.playState) { // 播放状态
        this.playIcon = pauseSvg;
      } else { // 暂停状态
        this.playIcon = playSvg;
      }
    },
    updateControls() {
      let bg = chrome.extension.getBackgroundPage();
      let playState = bg.musicPlayer.playState;
      // bg.musicPlayer.playState = !playState;
      if (playState) { // 播放状态
        this.playIcon = pauseSvg;
      } else { // 暂停状态
        this.playIcon = playSvg;
      }
      bg.musicPlayer.context.ontimeupdate = this.ontimeupdate
      // bg.musicPlayer.context.onplay = this.onplay
      bg.musicPlayer.context.onpause = this.onpause

    },
    onpause() { // 当音乐暂停时
      let bg = this.$bg;
      if (bg.musicPlayer.context.ended) {
        bg.musicPlayer.playState = false;
        //停止播放时，判断播放模式是啥
        modePlay(bg.musicPlayer);
      }
    },
    onplay() { // 当音乐播放时
      var currentMusic = Vue.ls.get(CURRENT_PLAYING_MUSIC)
      this.$store.commit('SET_CURRENTMUSIC', currentMusic);
      // this.$eventBus.$emit('updateCover')
    },
    ontimeupdate(e) {
      // 设置进度条
      this.currentPlayingLength = getMusicTime(e.target.currentTime);
      this.currentPlayingTotalLength = e.target.duration ? getMusicTime(e.target.duration) : this.currentPlayingTotalLength;
      this.progressWidth = e.target.currentTime * 100 / e.target.duration + '%';
    },
    progressClick(e) { // 设置点击后的进度
      let musicContext = this.$bg.musicPlayer.context;
      // 计算点击位置的百分比
      let progress = this.calculateProgress(e.offsetX);
      this.progressWidth = progress.toFixed(2) * 100 + "%";
      musicContext.currentTime = musicContext.duration * progress;
    },
    calculateProgress(clickPosition) {
      let width = this.$refs.progressbg.offsetWidth;
      return clickPosition / width;
    },
  },
  destroyed() {
    this.$eventBus.$off('updateControl')
  }
}
</script>

<style scoped>
/*按钮开始*/
.controlsContainer {
  width: 100%;
  height: 4rem;
  padding: 0;
  margin: 0;
}

.controlsBtn {
  height: 2.5rem;
  position: relative;
}

.mode, .previous, .next {
  display: inline-block;
  height: 2.5rem;
  width: 2rem;
  text-align: center;
  /*border: 1px red solid;*/
  padding-top: 0.5rem;
  margin: 0 1rem;
}


.next {
  margin: 0 1rem 0 5.5rem;
}

::v-deep .current {
  position: absolute;
  display: inline-block;
  height: 2.5rem;
  width: 2rem;
  text-align: center;
  margin: 0.125rem 1rem 0rem 1rem;

  /*padding-top: -0.5rem;*/
}

.btnContainer {
  height: 2rem;
  width: 2rem;
  cursor: pointer;
}

.btnContainer img {
  margin-top: 0.25rem;
}

.playBtn {
  position: relative;
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  background-color: #eaeaea;
  padding-top: 0.25rem;
  /*padding-left: 0.25rem ;*/
  margin-top: 0.25rem;

}

.playBtn:hover {
  background-color: #cbcbcb;
  padding-left: 0rem;

}

/*.playBtn img:hover{*/
/*  content: url("../../../assets/pause.svg");*/
/*}*/


.previous img:hover {
  content: url("../../../assets/previous-red.svg");
}

.next img:hover {
  content: url("../../../assets/next-red.svg");
}

/*按钮结束 进度条开始*/
.progressBar {
  height: 1.5rem;
}

/*进度条*/
.progressPlayingTime, .progressTotal {
  display: inline-block;
  font-size: 8px;
}

.progressBox {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  width: 20rem;
  margin-left: 5px;
  margin-right: 5px;
  padding: 0.5rem 0;
}

/*.progressBox>span{*/
/*  padding-left: 10px;*/
/*  padding-right: 10px;*/
/*}*/
.progressbg {
  display: inline-block;
  position: absolute;
  top: 60%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #cccccc;
  border-radius: 4px;
  cursor: pointer;
}

.progress {
  display: inline-block;
  position: absolute;
  width: 50%;
  height: 4px;
  top: 60%;
  left: 0;
  background-color: red;
  padding: 0 2px;
  cursor: pointer;
}

.progress > span {
  display: inline-block;
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: red;
  border-radius: 3px;
  top: -1px;
  right: 0;
}

.progress > span:hover {
  background-color: #ffffff;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: 2px red solid;
  top: -3px;
}

/*进度条结束*/

</style>
